<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">公告详情</div>
      <div class="main">
        <el-form auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>标题：</label>
              <div class="detail">{{ createList.title }}</div>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>创建时间</label>
              <div class="detail">{{ createList.createAt }}</div>
            </div>
            <div class="row">
              <label>修改时间：</label>
              <div class="detail">{{ createList.updateAt }}</div>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>内容：</label>
              <div class="edit_container" style="margin-top: 20px;">
                <quill-editor
                  ref="myQuillEditor"
                  v-model="createList.content"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)"
                />
              </div>
            </div>
          </div>

        </el-form>
      </div>
    </div>

  </div>

</template>

<script>
import { detailNotice } from '@/api/notice'
import { quillEditor } from 'vue-quill-editor' // quillEditor,Quill
import { addQuillTitle } from '@/components/editor/quill-title.js'// 鼠标移动上显示中文
import quillConfig from '@/components/editor/quill-config.js'// 鼠标移动上显示中文

// import { uploadFiles, deleteFiles } from '@/api/file'
export default {
  name: 'DetailNotice',
  components: {
    quillEditor
  },
  data() {
    return {
      createList: {},
      loading: false,
      // 富文本框参数设置
      editorOption: quillConfig
    }
  },
  computed: {

  },
  mounted() {
    addQuillTitle()
    this.getDetail()
  },
  methods: {
    // 富文本编辑器
    // editor.enable(false);// 在获取焦点的时候禁用
    onEditorReady(editor) { // 准备编辑器
    },
    onEditorBlur(e) {}, // 失去焦点事件
    onEditorFocus(e) {
      e.enable(false)
    }, // 获得焦点事件
    onEditorChange(e) {},
    handleCheckAllChange(val) {
      const ids = []
      for (let i = 0; i < this.projects.length; i++) {
        ids.push(this.projects[i].id)
      }
      this.addForm.projectIds = val ? ids : []
      this.isIndeterminate = false
    },
    handleCheckedChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.projects.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.projects.length
    },
    async getDetail() {
      const id = this.$route.query.id
      const res = await detailNotice(id)
      if (res.code === 200) {
        this.createList = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .detail{
              font-size:14px;
              font-weight:400;
              color:rgba(255,255,255,0.65);
              display: inline-block;
            }
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
      }
    }
  }
.edit_container{
      width: 92%;
      margin: 22px 0 auto;
      color: #fff;
    }
</style>
